<template>
	<!-- shoplist本地团购 -->
	<view class="g_wp">
		<view class="g_nav">
			<view class="bg">
				<view class="nav_bar">
					<view class="serch">
						<input type="text" v-model="keywords" @confirm="searchTap" placeholder="搜索你想要的产品" />
						<text class="iconfont icon-sousuo"></text>
					</view>
				</view>
				<scroll-view class="nav_menu" scroll-x>
					<view class="nav_item" :class="{active:menuIdx===0}" @click="menuTap(0,1)">
						<view class="nav_after">
							<view class="nav_item_con">
								<text>全部</text>
								<image v-show="menuIdx==0" src="/static/group/tit.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="nav_item" :class="{active:menuIdx===item.id}" v-for="item in classList" :key="item.id" @click="menuTap(item.id,1)">
						<view class="nav_after">
							<view class="nav_item_con">
								<text>{{item.name}}</text>
								<image v-show="menuIdx==item.id" src="/static/group/tit.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nav_menu2">
				<view class="item" :class="{active:menuIdx2===0}" @click="menuTap(0,2)">
					<text>销量优先</text>
					<!-- <text class="iconfont icon-sanjiaoxia"></text> -->
				</view>
				<view class="item" :class="{active:menuIdx2===1}" @click="menuTap(1,2)">
					<text>折扣优先</text>
					<!-- <text class="iconfont icon-sanjiaoxia"></text> -->
				</view>
				<view class="item" :class="{active:menuIdx2===2}" @click="menuTap(2,2)">
					<text>距离优先</text>
					<!-- <text class="iconfont icon-sanjiaoxia"></text> -->
				</view>
				<view class="item" v-if="isTuan" :class="{active:menuIdx2===3}" @click="menuTap(3,2)">
					<text>高佣优先</text>
					<!-- <text class="iconfont icon-sanjiaoxia"></text> -->
				</view>
			</view>
		</view>
		<view class="g_body">
			<view class="g_list">
				<view class="list_item" v-for="item in list" @click="$navTo('/pages/product/groupbuy?id='+item.id)"
					:key="item.id">
					<view class="l_position">
						<image :src="item.thumb"></image>
						<view class="l_address">
							<view class="l_tit"><image src="/static/group/add.png" mode="widthFix"></image><text>{{item.supplier.shortaddress}}</text></view>
							<view class="l_dis">{{item.supplier.distance}}</view>
						</view>
					</view>
					<text v-if="item.shareprice" class="l_money">{{item.shareprice}}</text>
					<view class="l_info">
						<text class="list_title clamp">{{item.title}}</text>
						<view class="l_small">
							<text>已售{{item.sales}}</text>
						</view>
						<view class="l_hot">
							<view class="l_tips">
								<view v-if="item.cardnum>0" class="l_card">次卡</view>
								<view class="label"><image src="/static/group/zhe.png" mode="widthFix"></image><text v-text="item.mark+'热销中'"></text></view>
							</view>
						</view>
						<view class="l_cart">
							<text class="money">{{item.saleprice}}<text class="money_num" v-if="item.cardnum>0">/{{item.cardnum}}次</text></text>
							<text class="old_money">￥{{item.productprice}}</text>
						</view>
						<view class="l_member">
							<image :src="item.supplier.logo" ></image>
							<text class="clamp">{{item.supplier.supname}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" ></image>
				<text v-if="isempty">没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location', 'city'])
		},
		data() {
			return {
				badgeStyle: '',
				keywords: '',
				mycart: '',
				menuIdx: 0,
				menuIdx2: 0,
				classList: [],
				page: 0,
				list: [],
				issearch: false,
				isempty: false,
				isloading: false,
				isTuan: false,
				mid: -1
			}
		},
		watch: {
			text() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			},
		},
		onReachBottom() {
			this.getList();
		},
		async onLoad(options) {
			if(options.mid){
				this.mid = options.mid;
			}
			this.getClass();
			this.searchTap();
			if(uni.getStorageSync('level')[4]||uni.getStorageSync('level')[5]||uni.getStorageSync('level')[6]){
				this.isTuan = true;
			}else{
				this.isTuan = false;
			}
			// await this.$onLaunched;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
		},
		methods: {
			getToken(){
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
				    scopes: 'auth_base',
				    success: res => {
						this.$axios('login/autologinAliPay','POST','member',{
							mid: this.mid,
							code: res.authCode
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
							}
						})
					}
				})
				// #endif
			},
			getClass() {
				this.$axios('groupgoods/cate', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.classList = res.data.data;
					}
				})
			},
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				let dataObj = {
					keyword: this.keywords,
					cate: this.menuIdx,
					page: this.page,
					porder: this.menuIdx2
				}
				let obj = {
					...dataObj,
					...this.Location
				};
				this.$axios('groupgoods/goodsList', 'POST', 'shop', obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			menuTap(v, type) {
				switch (type) {
					case 1:
						if (v === this.menuIdx) return;
						this.menuIdx = v;
						this.searchTap();
						break;
					case 2:
						if (v === this.menuIdx2) return;
						this.menuIdx2 = v;
						this.searchTap();
						break;
				}
			},
			navOrder() {
				uni.setStorageSync('upOrderType',2);
				this.$navTo('/pages/index/order');
			},
			searchTap() {
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script> 

<style lang="scss">
	@import '/store/icon.css';
	$bage-size: 12px;
	$bage-small: scale(0.7);
	$bage-height: 20px;
	.g_wp{
		background: #f0f2f5;
	}
	page {
		background-color: #f2f2f2;
		font-size: $font-base;
	}

	.g_nav {
		color: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 200;
		.bg{
			background: linear-gradient( 180deg, #4B05A7 0%, #8615E1 45%, #FBF8FE 100%);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			overflow: hidden;
		}
		.p_logo {
			display: flex;
			align-items: center;
			font-size: 34upx;
			image {
				height: 74upx;
				width: 74upx;
				margin: 0 20upx;
			}
		}

		.nav_bar {
			display: flex;
			align-items: center;
			padding: calc(var(--status-bar-height) + 50rpx) 20rpx 20rpx 20rpx;
			.serch {
				background: #fff;
				border-radius: 40px;
				color: #303133;
				padding: 0 50upx 0 66rpx;
				position: relative;
				width: 480rpx;
				input {
					height: 60upx;
				}
				.icon-sousuo {
					color: #666;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20rpx;
				}
			}
		}
	}

	.nav_menu {
		color: #333333;
		white-space: nowrap;
		width: 100%;
		font-size: 28rpx;
		height: 112rpx;
		background: #FFFFFF;
		font-weight: 600;
		.nav_item{
			display: inline-block;
			position: relative;
			margin-top: -2rpx;
			.nav_after{
				display: flex;
				align-items: center;
				padding: 34rpx 0;
				&::after{
					content:'';
					width: 2rpx;
					height: 30rpx;
					background: #DEDEDE;
					display: block;
				}
				.nav_item_con{
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding: 0 30rpx;
					text{
						position: relative;
						display: block;
					}
				}
			}
		}
		.active {
			font-size: 32rpx;
			margin-top: 0;
			image{
				width: 46rpx;
				margin-top: 6rpx;
				position: absolute;
				bottom: 16rpx;
			}
			text{
				top: -10rpx;
			}
		}
	}

	.nav_menu2 {
		padding-top: 20rpx;
		padding-left: 20rpx;
		background: #f0f2f5;
		padding-bottom: 20rpx;
		text-align: center;
		.item {
			display: inline-block;
			line-height: 38rpx;
			text-align: center;
			width: 124rpx;
			height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-right: 40rpx;
			font-size: 24rpx;
			color: #999999;
		}
		.active {
			color: $bg-color;
		}
	}

	.g_body {
		padding: 374rpx 10rpx 100rpx;

		.g_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.list_item {
				background: #fff;
				border-radius: 12rpx;
				box-sizing: border-box;
				margin: 0 10rpx 24rpx;
				padding-bottom: 10rpx;
				position: relative;
				width: calc(50% - 20upx);
				overflow: hidden;
				.l_position{
					position: relative;
					width: 100%;
					height: 290rpx;
					overflow: hidden;
					image {
						width: 100%;
						display: block;
						height: 100%;
					}
					.l_address{
						position: absolute;
						background-color: rgba(0,0,0,0.5);
						color: #fff;
						left: 0;
						bottom: 0;
						display: flex;
						border-radius: 0rpx 8rpx 0rpx 0rpx;
						font-size: 20rpx;
						.l_tit{
							background: linear-gradient( 90deg, #B82CF0 0%, #8816E1 100%);
							display: flex;
							align-items: center;
							padding: 2rpx 6rpx;
							image{
								width: 16rpx;
								margin-right: 4rpx;
							}
						}
						.l_dis{
							padding: 2rpx 6rpx;
						}
					}
				}
				.l_money{
					position: absolute;
					background-color: rgba(0,0,0,0.5);
					border-radius: 6rpx;
					padding: 2rpx 6rpx;
					color: #fff;
					font-size: 20rpx;
					right: 0;
					top: 0;
				}
				.l_info{
					padding: 10rpx 20rpx;
					.list_title {
						font-weight: bold;
						overflow: hidden;
						line-height: 45upx;
						white-space: nowrap;
						font-size: 28rpx;
						color: #333333;
					}
					.l_small{
						color: #999999;
						font-size: 20rpx;
						padding-top: 4rpx;
						text{
							margin-right: 8rpx;
						}
					}
					
					.l_cart {
						display: flex;
						align-items: flex-end;
						.money {
							color: #AF141D;
							font-size: 28rpx;
							font-weight: bold;
							margin-right: 10upx;
							.money_num{
								font-size: 20rpx;
							}
							&:before {
								content: '￥';
								font-size: 20rpx;
							}
						}
						
						.old_money {
							color: #999999;
							font-size: 20rpx;
							text-decoration: line-through;
						}
					}
					
					.l_hot {
						color: #750CD5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 6rpx 0;
						.l_tips{
							display: flex;
							.l_card{
								width: 64rpx;
								height: 34rpx;
								line-height: 34rpx;
								background: #FFF0DA;
								border-radius: 8rpx;
								border: 2rpx solid #E19C37;
								font-size: 20rpx;
								color: #E19C37;
								text-align: center;
								margin-right: 10rpx;
							}
						}
						.label {
							background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
							height: 34rpx;
							color: #FFFFFF;
							line-height: 34rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							font-size: 20rpx;
							padding: 0 8rpx;
							text{
								margin: 0 5upx;
							}
							image{
								width: 20rpx;
								margin-right: 4rpx;
							}
						}
					}
					
					.l_member {
						font-size: 20rpx;
						display: flex;
						align-items: center;
						color: #333333;
						margin-top: 10rpx;
						image {
							border-radius: 50%;
							width: 28rpx;
							height: 28rpx;
							margin-right: 10upx;
							vertical-align: bottom;
						}
						text {
							width: 80%;
						}
					}
				}
				
			}
		}
	}
</style>